<template>
	<view class="pages">
		<view class="header">
			<h2>{{performanceTotal}}</h2>
			<view class="title">
				日期期间分润利益(元)
			</view>
			<view style="display: flex;margin: 20rpx;">
				<view class="datetimePicker" @click="startTimeShow = true">
					{{ datevALUE(startInitTime || getFirstDayOfMonthTimestamp(startInitTime))}}
					<u-icon name="calendar" size="22" color="#666"></u-icon>
				</view>
				<u-icon name="minus" size="22" color="#fff"></u-icon>
				<view class="datetimePicker" @click="endTimeShow = true">
					{{ datevALUE(endInitTime || Date.parse(new Date()))}}
					<u-icon name="calendar" size="22" color="#666"></u-icon>
				</view>
			</view>
		</view>
		<u-tabs :list="list1" lineWidth="30" activeStyle="color: #f05a23" lineColor="#f05a23"
			itemStyle="padding:0 26px;height: 40px;background:#fff;" @click="click"></u-tabs>

		<view v-if="index==1">
			<view class="mid">
				共计<text>{{list.length||0}}</text>笔
			</view>
			<template v-if="list.length == 0 ">
				<u-empty mode="data" text="暂无数据" marginTop="200"></u-empty>
			</template>
			<template v-else>
				<view class="card" v-for="(item,index) in list" :key="index">
					<view class="row_title">
						交易时间:{{item.tradeTime}}
					</view>
					<view class="row_title">
						交易金额:{{item.tradeAmount}}
					</view>
					<view class="row_title">
						分润时间:{{item.achievTime}}
					</view>
					<view class="row_title">
						分润金额:{{item.achievAmount}}
					</view>
				</view>
			</template>
		</view>

		<view v-if="index==2">
			<view class="mid">
				共计<text>{{list.length||0}}</text>笔
			</view>
			<template v-if="list.length == 0 ">
				<u-empty mode="data" text="暂无数据" marginTop="200"></u-empty>
			</template>
			<template v-else>
				<view class="card" v-for="(item,index) in list" :key="index">
					<view class="row_title">
						交易金额:{{item.tradeAmount}}
					</view>
					<view class="row_title">
						分润时间:{{item.achievTime}}
					</view>
					<view class="row_title">
						分润金额:{{item.achievAmount}}
					</view>
				</view>
			</template>
		</view>
		<view v-if="index==3">
			<view class="mid">
				共计<text>{{list.length||0}}</text>笔
			</view>
			<template v-if="list.length == 0 ">
				<u-empty mode="data" text="暂无数据" marginTop="200"></u-empty>
			</template>
			<template v-else>
				<view class="card" v-for="(item,index) in list" :key="index">
					<view class="row_title">
						交易金额:{{item.tradeAmount}}
					</view>
					<view class="row_title">
						分润时间:{{item.achievTime}}
					</view>
					<view class="row_title">
						分润金额:{{item.achievAmount}}
					</view>
				</view>
			</template>
		</view>
		<view v-if="index==''">
			<view class="mid">
				共计<text>{{list.length||0}}</text>笔
			</view>
			<template v-if="list.length == 0 ">
				<u-empty mode="data" text="暂无数据" marginTop="200"></u-empty>
			</template>
			<template v-else>
				<view class="card" v-for="(item,index) in list" :key="index">
					<view class="row_title">
						交易时间:{{item.tradeTime || '未知'}}
					</view>
					<view class="row_title">
						交易金额:{{item.tradeAmount}}
					</view>
					<view class="row_title">
						分润时间:{{item.achievTime}}
					</view>
					<view class="row_title">
						分润金额:{{item.achievAmount}}
					</view>
				</view>
			</template>
		</view>

		<u-datetime-picker :show="startTimeShow" mode="date" :formatter="formatter" @cancel="startTimeShow = false"
			:maxDate="Date.parse(new Date())" @confirm="beginTimeConfirm"></u-datetime-picker>
		<u-datetime-picker :show="endTimeShow" mode="date" :formatter="formatter" @cancel="endTimeShow = false"
			@confirm="endTimeConfirm" :maxDate="Date.parse(new Date())"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		formatDate
	} from "@/utils/formatDate.js"
	import {
		achievementList
	} from '@/api/my/index.js';
	export default {
		data() {
			return {
				index: 1,
				leftNum: 0,
				startInitTime: '',
				endInitTime: Number(new Date()),
				achievType: '',
				performanceTotal: 0,
				info: {},
				list: [],
				list1: [{
					name: '成交流水',
					state: 1
				}, {
					name: '勘验流水',
					state: 2
				}, {
					name: '奖励流水',
					state: 3
				}, {
					name: '全部',
					state: ''
				}],
				startTimeShow: false,
				endTimeShow: false,
			}
		},
		onLoad() {
			this.startInitTime = this.getFirstDayOfMonthTimestamp()
		},
		onShow() {
			this.getFirstDayOfMonthTimestamp();
			this.getAchievementList()
		},

		methods: {
			getFirstDayOfMonthTimestamp() {
				var now = new Date();
				var firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
				return firstDayOfMonth.getTime();
			},

			leftClick() {
				uni.navigateBack(-1)
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			click(item) {
				console.log(item);
				if (item.index == 4) {
					this.index = ''
					return this.getAchievementList()
				}
				this.index = item.state
				this.getAchievementList()
			},
			beginTimeConfirm(value) {
				this.startInitTime = value.value
				this.startTimeShow = false
				this.getAchievementList()
			},
			endTimeConfirm(value) {
				this.endInitTime = value.value
				this.endTimeShow = false
				this.getAchievementList()
			},
			datevALUE(value) {
				if (value == "") return ""
				return formatDate(value)
			},
			async getAchievementList() {

				// console.log(this.datevALUE(this.startInitTime), this.datevALUE(this.endInitTime), this.index);
				const res = await achievementList(this.startInitTime, this.endInitTime, this.index)
				if (res.data.code == 200) {
					this.performanceTotal = res.data.data.performanceTotal
					this.list = res.data.data.list
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.pages {
		background-color: $pagebgc;
		min-height: 100vh;

		.header {
			height: 400rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background: linear-gradient(to bottom, #f56e3e 0%, #fff 100%);

			.title {
				font-weight: bold;
				margin-top: 30rpx;
			}

			.datetimePicker {
				font-size: 28rpx;
				display: flex;
				color: #666;
				background-color: #fff;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				margin: 20rpx;
			}
		}

		.mid {
			background-color: #fff;
			color: #666;
			margin: 20rpx 0;
			padding: 20rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 28rpx;
			white-space: nowrap;

			text {
				font-size: 32rpx;
				color: #f56e3e;
				font-weight: bold;
			}
		}

		.card {
			background-color: #fff;
			font-size: 28rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.row_title {
				color: #666;
				padding: 10rpx 0;
			}
		}

	}
</style>